import { Component } from "react";
import { LgDrawer, MaskBox, PMMapleft } from "../../components/simple";
import data from "../../assets/ststic/data/datadaping.json"

import "../../assets/styles/simple.scss";
import Point from "../../modules/Map2D/point";
import Mapol from "../../modules/Map2D/Map";
import { Line } from "../../modules/Map2D/layers";

export default class Home extends Component {
    map;
    state = {
        rightImg: require("../../assets/ststic/images/r-2-1.png"),
        data: data['平面地图'],
        currect: 2,
        IconLayer: null,
        IconLayer1: null
    }
    constructor(props) {
        super(props);
        this.map = this.props.Mapols;
        Mapol.setView(this.map, [119.919959126, 28.4589468], 14, 1000);
    }
    componentDidMount() {
        let Source = [];
        let IconLayer = null;
        data['平面地图'].forEach(item => {
            Source.push({
                longitude: item.po[0],
                latitude: item.po[1],
                name: item.name,
                scale: 0.4,
                text: item.name,
            })

        });


        IconLayer = Point.Icons({ Source });
        this.setState({
            IconLayer
        })
        this.map.addLayer(IconLayer)
    }
    /**
     * 左边点击选择切换页面
     */
    leftOnClick = (sub) => {
        let { data, currect, IconLayer1 } = this.state;
        data[currect].status = false;
        data[sub].status = true;
        IconLayer1 && this.map.removeLayer(IconLayer1);
        this.setState({
            data,
            currect: sub,
            rightImg: require(`../../assets/ststic/images/r-2-${sub + 1}.png`)
        });
        Mapol.setView(this.map, data[sub].po, 16, 1000);
        IconLayer1 = Line(data[sub].outline, { color: '#02feaa', width: 4, fill: '#2b41a293' });
        this.map.addLayer(IconLayer1);
        this.setState({
            IconLayer1
        })
    }
    componentWillUnmount() {
        let { IconLayer } = this.state;
        IconLayer.distroy()
    }
    render() {
        const { rightImg, data
        } = this.state;
        return (

            <div className={'drawer-main'}
                style={{
                    pointerEvents: 'none'
                }}
            >
                <MaskBox />
                <LgDrawer
                    visible={true}
                    left={
                        <>
                            <PMMapleft
                                dataList={data}
                                onClick={this.leftOnClick}
                            />
                        </>
                    }
                    right={<>
                        <img
                            style={{ width: "90%", marginTop: '60px' }}
                            src={rightImg} alt=""
                        />
                    </>}
                />
            </div>


        )
    }
}